import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store/store'
// import Main from '../views/Main.vue'

Vue.use(VueRouter) //  全局引入

const routes = [{
        path: '/',
        name: 'login',
        component: () => import('@/view/login.vue') //按需引入，路由懒加载
    },
    {
        path: '/register',
        name: 'register',
        component: () => import('@/view/register.vue') //按需引入，路由懒加载
    },
    {
        path: '/test',
        name: 'test',
        component: () => import('@/view/test.vue') //按需引入，路由懒加载
    },
    { //首页设计，登录后的界面
        path: '/home',
        name: 'home',
        component: () => import('@/view/home.vue'), //按需引入，路由懒加载,
        redirect: '/Home',
        // 嵌套一个路由
        children: [{
                path: '/blogmanager',
                name: 'blogmanager',
                component: () => import('@/components/BlogManager.vue') //按需引入，路由懒加载
            },
            { //这里是首页里首页的组件
                path: '/Home',
                name: 'Home',
                component: () => import('@/components/Home.vue') //按需引入，路由懒加载
            },
            {
                path: '/publishblog',
                name: 'publishblog',
                component: () => import('@/components/PublishBlog.vue') //按需引入，路由懒加载
            },
            {
                path: '/userinfo',
                name: 'userinfo',
                component: () => import('@/components/UserInfo.vue') //按需引入，路由懒加载
            },
            {
                path: '/weather',
                name: 'weather',
                component: () => import('@/components/Weather.vue') //按需引入，路由懒加载
            },
            {
                path: '/Product',
                name: 'Product',
                // redirect: '/firstMenu',
                component: () => import('@/components/Product.vue'), //按需引入，路由懒加载
                children: []
            },
            {
                path: '/firstMenu',
                name: 'firstMenu',
                component: () => import('../components/firstMenu.vue')
            }, {
                path: '/secondMenu',
                name: 'secondMenu',
                component: () => import('../components/secondMenu.vue')
            }
        ]
    }

]




const router = new VueRouter({
    mode: 'history',
    routes
})

// 路由守卫 导航守卫 拦截路由
router.beforeEach((to, from, next) => {

    // 验证token 只有存在token的时候才能跳转到内容页
    let token = JSON.parse(localStorage.getItem('userInfo'))
    
    let deleteCount = JSON.parse(localStorage.getItem('deleteCount'))

    let articleCount = JSON.parse(localStorage.getItem('articleCount'))

    let imgurl = JSON.parse(localStorage.getItem('imgurl'))

    if (token || to.path === '/') { //存在 token 进行跳转
        //加载store方法
        console.log('token:'+token)
        store.state.objKey = 0
        store.commit('updateUsername', token.name)
        store.commit('updateUserClass') //更新blog类型
        store.commit('updateUserArticle') //更新文章


        store.state.deleteCount = deleteCount
        store.state.imgurl = imgurl
        window.updateArticlePage

        if (articleCount == 0) {
            deleteCount = 0
            store.state.deleteCount = 0
            localStorage.setItem('deleteCount', JSON.stringify(store.state.deleteCount))
        }

        next()

    } else { //没有token 返回登录页
        next('/')
    }
})

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}


export default router //  暴露